<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="UTF-8" />
    <title>Add Case</title>
    <link rel="stylesheet" type="text/css" media="all" href="/layui/css/layui.css"/>
    <script type="text/javascript" src="/layui/layui.all.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/myJs.js"></script>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>新加Case</legend>
    </fieldset>

    <div class="layui-container">
        <!--6/12 布局-->
        <div class="layui-row">
            <div class="layui-col-xs6">
                <form id="caseform" class="layui-form layui-form-pane">

                    <!--用例名称-->
                        <div class="layui-form-item">
                        <label class="layui-form-label">用例名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" required="required" autocomplete="off" placeholder="用例名称(英文)" class="layui-input" />
                        </div>
                        <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
                    </div>

                    <!--URL-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">URL</label>
                        <div class="layui-input-block">
                            <input type="text" name="url" autocomplete="off" placeholder="http://" class="layui-input" />
                        </div>
                    </div>

                    <!--模块-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">模块</label>
                        <div class="layui-input-block">
                            <datalist id="modulelist">
                                <option label="财务工作台" value="财务工作台" />
                                <option label="业务工作台" value="业务工作台" />
                                <option label="近近" value="近近" />
                                <option label="记返费" value="记返费" />
                            </datalist>
                            <input type="text" list="modulelist" placeholder="" name="module" autocomplete="off" class="layui-input"/>
                        </div>
                    </div>

                    <!--方法-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">方法</label>
                        <div class="layui-input-inline">
                            <datalist id="methodlist">
                                <option label="POST" value="POST" />
                                <option label="GET" value="GET" />
                            </datalist>
                            <input type="text" list="methodlist" value="POST" placeholder="" name="method" autocomplete="off" class="layui-input" />
                        </div>
                    </div>

                    <!--是否验签-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否验签</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="signature" lay-skin="switch" checked="checked" value="on" />
                        </div>
                    </div>

                    <!--Body体-->
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">Body体</label>
                        <div class="layui-input-block">
                            <textarea placeholder="{json:String}" name="body" style="height: 250px" class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <!--是否启用-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否启用</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="status" lay-skin="switch" checked="checked" value="on" />
                        </div>
                    </div>

                    <!--中文说明-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">中文说明</label>
                        <div class="layui-input-inline">
                            <input type="text" name="chinese" autocomplete="off" class="layui-input" placeholder="中文说明" />
                        </div>
                    </div>

                    <!--成功断言-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">成功断言</label>
                        <div class="layui-input-block">
                            <input type="text" name="shouldbe" autocomplete="off" class="layui-input" placeholder="200..." />
                        </div>
                    </div>

                    <!--备注-->
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea placeholder="写下你的备注..." name="remark" style="height: 250px" class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <!--提交按钮-->
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="reset" class="layui-btn" lay-filter="add" id="add" lay-submit="">提交</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</body>

<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        form.render();
        //监听提交
        form.on('submit(add)', function(data){

            var from= $("#caseform");
            var model= serializeObject(from);

            $.ajax({
                type: "post",
                url: "/api/cases/add",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(model),
                dataType: "json",
                success: function(data) {
                    layer.confirm('新建成功', function(index){
                        loadPage("/case/allCases");
                    });

                }
            })
        });
    });
</script>
</html>